<template>
	<view class="user">
    <!-- 顶部导航 -->
    <view>
      <f-navbar title="个人中心" fontSize="35" fontColor="#fff"
        gradient="linear-gradient(90deg,rgb(255, 0, 0),rgb(170, 0, 255))"></f-navbar>
    </view>
		<!-- <navbar backgroundColor="#e93323" color="#ffffff">个人中心</navbar> -->
		<view class="header acea-row row-between-wrapper" style="background:linear-gradient(90deg,rgb(255, 0, 0),rgb(170, 0, 255)) ;">
			<view class="picTxt acea-row row-between-wrapper">
				<view class="pic"><image :src="userInfo.avatarUrl+''!=='undefined'?userInfo.avatarUrl:''" mode="" class="pic"></image></view>
				<view class="text">
					<view class="acea-row row-middle">
						<!-- <view class="name line1" @click="openPop">{{userInfo?userInfo.nickname:"请点击授权"}}</view> -->
            <view class="name line1" @click="openPop">{{userInfo.nickName+''==='undefined'?"请点击授权":userInfo.nickName}}</view>
					</view>
					<view class="getPhone">
						<text>绑定手机号</text>
					</view>
				</view>
			</view>
			<navigator url="/pages/pack/user_info/user_info" class="setting iconfont icon-shezhi"></navigator>
		</view>
		<view class="wrapper">
			<view class="nav acea-row row-middle">
				<view class="item" @click="onWallet('wallet')">
					<view>我的余额</view>
					<view class="num">{{userInfo.now_money | 0}}</view>
				</view>
				<view class="item" @click="onWallet('integral')">
					<view>当前积分</view>
					<view class="num">{{userInfo.integral | 0}}</view>
				</view>
				<view class="item" @click="onWallet('coupon')">
					<view>优惠券</view>
					<view class="num">{{userInfo.couponCount |0}}</view>
				</view>
			</view>
      <!-- 签到积分，付款码 -->
      <view class="integral-payment">
      	<view class="list" @click="onWallet('SignIn')">
      		<view class="title">
      			<text class="iconfont icon-qiandao" style="font-weight: bold;"></text>
      			<text>签到</text>
      		</view>
      		<view class="mess">
      			<text>每日签到 领取积分</text>
      		</view>
      	</view>
      	<view class="list" @click="onWallet('payment')">
      		<view class="title">
      			<text class="iconfont icon-fukuanma"></text>
      			<text>付款码</text>
      		</view>
      		<view class="mess">
      			<text>到店扫码 快捷支付</text>
      		</view>
      	</view>
      </view>
      <!-- 我的订单   -->
			<view class="myOrder">
				<view class="title acea-row row-between-wrapper">
					<view>商城订单</view>
					<navigator class="allOrder" :url="'/subpkg/GoodsOrderList/GoodsOrderList'">
						全部订单
						<text class="iconfont icon-jiantou">></text>
					</navigator>
				</view>
				<view class="orderState acea-row row-middle">
					<u-grid :col="5" :border="false">
						<u-grid-item>
							<navigator :url="'/subpkg/GoodsOrderList/GoodsOrderList?type=0'" class="item">
								<view class="pic"><image src="../../static/images/dfk.png" mode="" class="pic"></image></view>
								<view>待付款</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/subpkg/GoodsOrderList/GoodsOrderList?type=1'" class="item">
								<view class="pic"><image src="../../static/images/dfh.png" mode="" class="pic"></image></view>
								<view>待发货</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/subpkg/GoodsOrderList/GoodsOrderList?type=2'" class="item">
								<view class="pic"><image src="../../static/images/dsh.png" mode="" class="pic"></image></view>
								<view>待收货</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/subpkg/GoodsOrderList/GoodsOrderList?type=3'" class="item">
								<view class="pic"><image src="../../static/images/dpj.png" mode="" class="pic"></image></view>
								<view>待评价</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator :url="'/subpkg/GoodsOrderList/GoodsOrderList?type=4'" class="item">
								<view class="pic"><image src="../../static/images/sh.png" mode="" class="pic"></image></view>
								<view>已完成</view>
							</navigator>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
      <!-- 我的预约   -->
      <view class="myOrder">
      	<view class="title acea-row row-between-wrapper">
      		<view>预约订单</view>
      		<navigator class="allOrder" :url="'/subpkg/ServiceOrderList/ServiceOrderList'">
      			全部订单
      			<text class="iconfont icon-jiantou">></text>
      		</navigator>
      	</view>
      	<view class="orderState acea-row row-middle">
      		<u-grid :col="5" :border="false">
      			<u-grid-item>
      				<navigator :url="'/subpkg/ServiceOrderList/ServiceOrderList?type=0'" class="item">
      					<view class="pic"><image src="../../static/images/dfk.png" mode="" class="pic"></image></view>
      					<view>待付款</view>
      				</navigator>
      			</u-grid-item>
      			<u-grid-item>
      				<navigator :url="'/subpkg/ServiceOrderList/ServiceOrderList?type=1'" class="item">
      					<view class="pic"><image src="../../static/images/dfh.png" mode="" class="pic"></image></view>
      					<view>待使用</view>
      				</navigator>
      			</u-grid-item>
      			<u-grid-item>
      				<navigator :url="'/subpkg/ServiceOrderList/ServiceOrderList?type=3'" class="item">
      					<view class="pic"><image src="../../static/images/dpj.png" mode="" class="pic"></image></view>
      					<view>待评价</view>
      				</navigator>
      			</u-grid-item>
      			<u-grid-item>
      				<navigator :url="'/subpkg/ServiceOrderList/ServiceOrderList?type=4'" class="item">
      					<view class="pic"><image src="../../static/images/sh.png" mode="" class="pic"></image></view>
      					<view>已完成</view>
      				</navigator>
      			</u-grid-item>
      		</u-grid>
      	</view>
      </view>
      <!-- 我的服务 -->
			<view class="myService">
				<view class="title acea-row row-middle">我的服务</view>
				<view class="serviceList acea-row row-middle">
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<navigator url="/subpkg2/MyMemberInterest/MyMemberInterest" class="item">
								<view class="pic"><image src="../../static/images/myService01.png" mode="" class="pic"></image></view>
								<view>会员中心</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator @click="onWallet('wallet')" class="item">
								<view class="pic"><image src="../../static/images/myService04.png" mode="" class="pic"></image></view>
								<view>我的余额</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<!-- <navigator url="/pages/pack/user_address_list/user_address_list" class="item"> -->
                <navigator @click="myAddress" class="item">
								<view class="pic"><image src="../../static/images/myService05.png" mode="" class="pic"></image></view>
								<view>地址信息</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator url="/pages/pack/user_collection/user_collection" class="item">
								<view class="pic"><image src="../../static/images/myService06.png" mode="" class="pic"></image></view>
								<view>我的收藏</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator @click="onWallet('coupon')" class="item">
								<view class="pic"><image src="../../static/images/myService07.png" mode="" class="pic"></image></view>
								<view>优惠券</view>
							</navigator>
						</u-grid-item>
						<u-grid-item>
							<navigator @click="onWallet('integral')" class="item">
								<view class="pic"><image src="../../static/images/myService02.png" mode="" class="pic"></image></view>
								<view>我的积分</view>
							</navigator>
						</u-grid-item>
            <u-grid-item>
            	<navigator url="/subpkg/BrowsingHistory/BrowsingHistory" class="item">
            		<view class="pic"><image src="../../static/images/myService02.png" mode="" class="pic"></image></view>
            		<view>浏览记录</view>
            	</navigator>
            </u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
    <!-- 为你推荐 -->
    <view class="recommend-info">
      <view class="recommend-title">
        <view class="title">
          <image src="/static/wntj_title.png" mode=""></image>
        </view>
      </view>
      <view class="goods-list">
        <view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods')" :key="index">
          <view class="pictrue">
            <image :src="item.img" mode="heightFix"></image>
          </view>
          <view class="title-tag">
            <view class="tag">
              <text v-if="item.is_goods === 1">特价</text>
              {{item.name}}
            </view>
          </view>
          <view class="price-info">
            <view class="user-price">
              <text class="min">￥</text>
              <text class="max">{{item.price}}</text>
            </view>
            <view class="vip-price">
              <image src="/static/vip_ico.png"></image>
              <text>￥{{item.vip_price}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  // 按需导入mapState, mapMutations, mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
	export default{
		data(){
			return{
				show:false,//授权登录弹窗  是否显示
				iflogin:false,//是否登录
				// userInfo:null,//用户信息
        // 为你推荐商品列表
        goodsList:[
          {
            id: 1,
            name: 'BANDALY 2020夏季女装连衣裙韩版大码宽松显瘦套装裙子两件套 JX19301 上豆绿下米白 M ',
            price: '219.00',
            vip_price: '129.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_01.png',
            is_goods: 0,
          },{
            id: 1,
            name: '花花公子 卫衣男秋季圆领薄款休闲体恤男士时尚长袖T恤外套上衣男生情侣装套头衣服秋天男装 白色 XL',
            price: '139.00',
            vip_price: '99.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_02.png',
            is_goods: 1,
          },{
            id: 1,
            name: '【两件套】花花公子PLAYBOY短袖T恤男套装夏季新款卫衣男士韩版修身冰丝宽松运动休闲上衣服裤子男装 CYFS903卡其色 XL',
            price: '168.00',
            vip_price: '158.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_03.png',
            is_goods: 1,
          },{
            id: 1,
            name: '雪域森林短袖T恤男装2020夏季潮流时尚衣服男潮牌圆领印花宽松T恤半袖男 20855橙色 XL',
            price: '68.00',
            vip_price: '36.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_04.png',
            is_goods: 0,
          },{
            id: 1,
            name: '短袖男夏季T恤男装韩版潮流印花套头衣服男士圆领宽松五分袖学生休闲夏天运动时尚情侣装大码 D119白色 XL',
            price: '68.00',
            vip_price: '59.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_05.png',
            is_goods: 0,
          },{
            id: 1,
            name: '时尚休闲套装女夏季热天宽松女孩中学生高中初中生女生短袖套装衣服夏天少女学生韩版原宿风T恤潮流裤子一套 绿字母上衣+绿色裤两件套 均码',
            price: '83.00',
            vip_price: '78.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_06.png',
            is_goods: 1,
          },{
            id: 1,
            name: '北极绒2020春夏季棉质睡衣女睡裙女夏季韩版纯棉短袖少女性感睡衣甜美可爱卡通家居服连衣裙 A3023 M【纯棉 品质保障】',
            price: '68.00',
            vip_price: '48.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_07.png',
            is_goods: 1,
          },{
            id: 1,
            name: '韩卡婷 2020新款夏季短袖t恤女宽松学生衣服原宿风青春百搭显瘦上衣体恤闺蜜女装 白色 均码【80-120斤】',
            price: '29.00',
            vip_price: '19.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_08.png',
            is_goods: 0,
          },{
            id: 1,
            name: '美连诚雪纺连衣裙 2020新款女夏裙子波点气质沙滩裙仙气时尚女装休闲衣服大码女装 白底红点 M ',
            price: '168.00',
            vip_price: '160.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_09.png',
            is_goods: 0,
          },{
            id: 1,
            name: '凝拉t恤女短袖纯棉2020新款夏装中长款韩版宽松大码欧货潮上衣服半袖体恤 桔色2053 2XL（建议150-170斤)',
            price: '89.00',
            vip_price: '78.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_10.png',
            is_goods: 0,
          },{
            id: 1,
            name: '荣耀Play4T 全网通6GB+128GB大内存 幻夜黑 4000mAh大电池 4800万AI摄影  6.39英寸魅眼屏',
            price: '1190.00',
            vip_price: '1100.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_11.png',
            is_goods: 0,
          },{
            id: 1,
            name: '小米（MI） Redmi 8A',
            price: '699.00',
            vip_price: '599.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_12.png',
            is_goods: 0,
          },{
            id: 1,
            name: 'Apple iPhone 11',
            price: '5899.00',
            vip_price: '5800.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_13.png',
            is_goods: 0,
          },{
            id: 1,
            name: '戴尔(DELL)成就3681英特尔酷睿i5商用办公高性能台式机电脑整机(十代i5-10400 8G 1T 三年上门售后)21.5英寸',
            price: '3699.00',
            vip_price: '3600.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_14.png',
            is_goods: 0,
          },{
            id: 1,
            name: '戴尔DELL灵越5000 14英寸酷睿i5网课学习轻薄笔记本电脑(十代i5-1035G1 8G 512G MX230 2G独显)银',
            price: '4888.00',
            vip_price: '4999.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_15.png',
            is_goods: 0,
          },{
            id: 1,
            name: '联想(Lenovo) 来酷 Lecoo一体台式机电脑23英寸(J4105 8G 256G SSD 三年上门）白',
            price: '4888.00',
            vip_price: '3600.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_16.png',
            is_goods: 0,
          },{
            id: 1,
            name: 'Apple 2020新款 MacBook Pro 13.3【带触控栏】十代i5 16G 512G 2.0GHz 深空灰 笔记本电脑 轻薄本 MWP42CHA',
            price: '18200.00',
            vip_price: '18200.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_17.png',
            is_goods: 0,
          },{
            id: 1,
            name: 'Apple新款 Mac mini台式电脑主机 八代i5 8G 512G SSD 台式机 MXNG2CHA',
            price: '8299.00',
            vip_price: '8200.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_18.png',
            is_goods: 0,
          },{
            id: 1,
            name: '同仁堂美白祛斑霜套装 淡斑美白祛黄提亮补水保湿套装 男女士护肤美白化妆品套装',
            price: '288.00',
            vip_price: '282.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_19.png',
            is_goods: 0,
          },{
            id: 1,
            name: '【限定款·雕花口红8支礼盒装】中国风口红套装七夕礼物送女朋友老婆生日礼物唇膏唇釉花仙西子同心锁口红 【限定款8支雕花口红】',
            price: '188.00',
            vip_price: '99.00',
            img: 'http://cn.shichengtai.xyz/goods/goods_thumb_20.png',
            is_goods: 0,
          },
        ],
        			
			}
		},
    computed: {
      // 将 m_cart 模块中的 cart 数组映射到当前页面中使用
      ...mapState('m_user', ['userInfo']),
    },
    onLoad(option){
      if(option.nickName+''!=='undefined'){
        this.userInfo.nickName=option.nickName;
        this.userInfo.avatarUrl=option.avatarUrl;
      }
      if(this.userInfo.openId===undefined || this.userInfo.userId===undefined ){
        uni.$showMsg("登录尽享更多权益~")
        setTimeout(()=>{
          uni.navigateTo({
            url:'/subpkg2/login/login'
          })
        },1500)
        return;
      }
      
    },
		methods:{
      //请点击授权  单击事件
			openPop:function(){
				// if(!this.iflogin){
				// 	this.show = true
				// }
        uni.navigateTo({
          url: '/subpkg2/login/login'
        })
			},
      // 弹窗关闭 单击事件
			closePop:function(){
				this.show = false
			},
      /**
       * 钱包跳转点击
       */
      onWallet(type){
      	switch (type){
      		case 'integral'://积分页面
      			uni.navigateTo({
      				url: '/subpkg2/IntegralDetails/IntegralDetails',
      			})
      			break;
      		case 'coupon'://优惠券页面
      			uni.navigateTo({
      				url: '/subpkg2/MyCoupon/MyCoupon',
      			})
      			break;
      		case 'wallet'://钱包页面
      			uni.navigateTo({
      				url: '/subpkg2/MyWallet/MyWallet',
      			})
      			break;
      		case 'SignIn'://签到页面
      			uni.navigateTo({
      				url: '/subpkg2/SignIn/SignIn',
      			})
      			break;
      		case 'payment'://付款码页面
      			uni.navigateTo({
      				url: '/subpkg2/PaymentCode/PaymentCode',
      			})
      			break;
      	}
      },
      //地址信息
      async myAddress(){
        const [err, succ] = await uni.chooseAddress().catch(err => err)
      },
      /**
       * 跳转点击
       * @param {String} type 跳转类型
       */
      onSkip(type){
        switch (type){
          case 'goods'://跳转到商品详情页面
            uni.navigateTo({
              url: '/subpkg/GoodsDetails/GoodsDetails',
              animationType: 'zoom-fade-out',
              animationDuration: 200
            })
            break;
        }
      },
		}
	}
</script>

<style scoped lang="scss">
  /*每个页面公共css */
  @import '/colorui/main.css';
  @import '/colorui/icon.css';
  @import '/style/FontStyle.css'; 
  
  view {
  	box-sizing: border-box;
  }
  
  image {
  	width: 100%;
  	height: 100%;
  }
  
  .iconfont {
  	font-family: "iconfont" !important;
  	font-size: 16px;
  	font-style: normal;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  }
  
  .acea-row {
  	display: flex;
  	flex-wrap: wrap;
  }
  
  .acea-row.row-top {
  	align-items: flex-start;
  }
  
  .acea-row.row-middle {
  	align-items: center;
  }
  
  .acea-row.row-bottom {
  	align-items: flex-end;
  }
  
  .acea-row.row-left {
  	justify-content: flex-start;
  }
  
  .acea-row.row-center {
  	justify-content: center;
  }
  
  .acea-row.row-right {
  	justify-content: flex-end;
  }
  
  .acea-row.row-between {
  	justify-content: space-between;
  }
  
  .acea-row.row-around {
  	justify-content: space-around;
  }
  
  .acea-row.row-column {
  	flex-direction: column;
  }
  
  .acea-row.row-column-between {
  	flex-direction: column;
  	justify-content: space-between;
  }
  
  .acea-row.row-column-around {
  	flex-direction: column;
  	justify-content: space-around;
  }
  
  .acea-row.row-center-wrapper {
  	align-items: center;
  	justify-content: center;
  }
  
  .acea-row.row-between-wrapper {
  	align-items: center;
  	justify-content: space-between;
  }
  
  .line1 {
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  }
  
  .line2{
  	word-break: break-all;
  	display: -webkit-box;
  	-webkit-line-clamp: 2;
  	-webkit-box-orient: vertical;
  	overflow: hidden;
  }
  
  // 修改微信checkbox
  checkbox .wx-checkbox-input {
  	background-color: #fafafa;
  }
  
  checkbox .wx-checkbox-input {
  	border-radius: 50%;
  	width: 38rpx;
  	height: 38rpx;
  }
  
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  	border: 1px solid #e93323 !important;
  	background-color: #e93323 !important;
  	color: #fff !important;
  }
  
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  	font-size: 35rpx;
  }
  
  .bg-color{
  	background-color: #e93323!important;
  }
  
  .font-color{
  	color: #fc4141!important;
  }
  
  radio .wx-radio-input {
  	border-radius: 50%;
  	width: 38rpx;
  	height: 38rpx
  }
  
  radio .wx-radio-input.wx-radio-input-checked {
  	border: 1px solid #e93323!important;
  	background-color: #e93323!important
  }
  
  radio .uni-radio-input {
  	border-radius: 50%;
  	width: 38rpx;
  	height: 38rpx
  }
  
  radio .uni-radio-input.uni-radio-input-checked {
  	border: 1px solid #e93323!important;
  	background-color: #e93323!important
  }
  
  
	.user{
		font-size: 28rpx;
		background-color: #f5f5f5;
		color: #333;
		min-height: 100vh;
	}
	.user .header{
		background-color: #e93323!important;
		padding: 0 30rpx;
		height: 190rpx;
		position: relative;
	}
	.user .header::before{
		position: absolute;
		left: 0;
		right: 0;
		bottom: -290rpx;
		z-index: -1;
		content: '';
		height: 100rpx;
		width: 100%;
		border-radius: 0 0 50% 50%;
		background-color: #e93323;
	}
	.user .header .picTxt .pic{
		width: 120rpx;
		height: 120rpx;
	}
	.user .header .picTxt .pic image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #f5f5f5;
	}
	.user .header .picTxt .text{
		width: 434rpx;
		color: rgba(255,255,255,1);
		margin-left: 35rpx;
	}
	.user .header .picTxt .text .name{
		font-size: 32rpx;
		max-width: 270rpx;
	}
	.user .header .picTxt .text .getPhone{
		margin-top: 20rpx;
	}
	.user .header .picTxt .text .getPhone text{
		padding: 2rpx 18rpx;
		background-color: #ca1f10;
		border-radius: 50px;
		font-size: 22rpx;
		border: 1px solid #e8695e;
		color: #ffffff;
	}
	.user .header .setting{
		font-size: 36rpx;
		color: #fff;
		margin-top: -52rpx;
	}
	.user .wrapper{
		padding: 0 20rpx;
		position: relative;
		z-index: 999;
	}
	.user .wrapper .nav{
		background-color: #fff;
		border-radius: 6rpx;
		height: 140rpx;
	}
	.user .wrapper .nav .item{
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
	}
	.user .wrapper .nav .item:nth-child(n+1){
		border-left: 1px solid #eee;
	}
	.user .wrapper .nav .item .num{
		margin-top: 10rpx;
		font-size: 36rpx;
		color: #282828;
	}
	.user .wrapper .myOrder{
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 15rpx;
	}
	.user .wrapper .myOrder .title{
		height: 88rpx;
		padding: 0 30rpx;
		border-bottom: 1px dashed #ddd;
		font-size: 30rpx;
		color: #282828;
	}
	.user .wrapper .myOrder .title .allOrder{
		font-size: 26rpx;
		color: #666;
		height: 88rpx;
		line-height: 88rpx;
	}
	.user .wrapper .myOrder .title .allOrder text{
		font-size: 30rpx;
		margin-left: 7rpx;
	}
	.user .wrapper .myOrder .orderState{
		height: 160rpx;
	}
	.user .wrapper .myOrder .orderState .item{
		font-size: 26rpx;
		color: #454545;
		flex: 1;
		text-align: center;
	}
	.user .wrapper .myOrder .orderState u-grid{
		width: 100%;
	}
	.user .wrapper .myOrder .orderState .item .pic{
		width: 49rpx;
		height: 42rpx;
		margin: 0 auto 18rpx auto;
		position: relative;
	}
	.user .wrapper .myService{
		background-color: #fff;
		margin-top: 15rpx;
		border-radius: 10rpx;
	}
	.user .wrapper .myService .title{
		height: 88rpx;
		padding: 0 30rpx;
		border-bottom: 1px dashed #ddd;
		font-size: 30rpx;
		color: #282828;
	}
	.user .wrapper .myService .serviceList{
		padding: 8rpx 0 27rpx 0;
	}
	.user .wrapper .myService .serviceList u-grid{
		width: 100%;
	}
	.user .wrapper .myService .serviceList .item{
		text-align: center;
		font-size: 26rpx;
		color: #333;
	}
	.user .wrapper .myService .serviceList .item .pic{
		width: 52rpx;
		height: 52rpx;
		margin: 0 auto 16rpx auto;
	}
  
  /* 签到，付款码 */
  .integral-payment{
  	display: flex;
  	justify-content: space-between;
  	// width: 94%;
    width: 100%;
  	height: 180rpx;
  	margin: 20rpx auto;
  	.list{
  		width: 48%;
  		height: 100%;
  		background-color: #FFFFFF;
  		border-radius: 20rpx;
  		.title{
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			width: 100%;
  			height: 120rpx;
  			.iconfont{
  				font-size: 48rpx;
  				margin-right: 10rpx;
  				font-weight: normal;
  			}
  			text{
  				color: #212121;
  				font-size: 28rpx;
  				font-weight: bold;
  			}
  		}
  		.mess{
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			width: 100%;
  			text{
  				color: #C0C0C0;
  				font-size: 26rpx;
  			}
  		}
  	}
  }
  /* 为你推荐 */
  .recommend-info{
    width: 100%;
    background-color: #f2f2f2;
    .recommend-title{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100rpx;
      .title{
        display: flex;
        align-items: center;
        image{
          width: 416rpx;
          height: 40rpx;
        }
      }
    }
    .goods-list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 30rpx;
      .list{
        width: 49%;
        height: 540rpx;
        margin-bottom: 20rpx;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        overflow: hidden;
        .pictrue{
          display: flex;
          justify-content: center;
          width: 100%;
          image{
            height: 350rpx;
          }
        }
        .title-tag{
          // display: flex;
          height: 100rpx;
          padding: 20rpx;
          .tag{
            float: left;
            margin-right: 10rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
            font-size: 26rpx;
            line-height: 40rpx;
            text{
              font-size: 24rpx;
              color: #FFFFFF;
              padding: 4rpx 16rpx;
              background: linear-gradient(to right,$base,$change-clor);
              border-radius: 6rpx;
              margin-right: 10rpx;
            }
          }
        }
        .price-info{
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          padding: 0 20rpx;
          height: 80rpx;
          .user-price{
            display: flex;
            align-items: center;
            text{
              color: $price-clor;
            }
            .min{
              font-size: 24rpx;
            }
            .max{
              font-size: 32rpx;
            }
          }
          .vip-price{
            display: flex;
            align-items: center;
            image{
              width: 26rpx;
              height: 26rpx;
              margin-right: 10rpx;
            }
            text{
              color: #fcb735;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
  
</style>
